import React from 'react'
import { browserHistory } from 'react-router'
import { Panel, Cell, CellBody, CellFooter, Flex, FlexItem } from 'react-weui'

export default class UserOrder extends React.Component {
	constructor(props) {
		super(props)
	}
	handleOpenOrder() {
		browserHistory.push(`/store/${this.props.storeId}/user/order`);
	}
	render() {
		const { storeId } = this.props;
		const iconStyle = {
            fontSize: '1.3em'
		};
		return (
            <Panel>
                <Cell href="javascript:;" onClick={this.handleOpenOrder.bind(this)} style={{
                	borderBottom: '1px solid #f2f2f2'
                }} access>
                    <CellBody>
                        我的订单
                    </CellBody>
                    <CellFooter>
                        <p>查看所有订单</p>
                    </CellFooter>
                </Cell>

			        <Flex style={{
			        	paddingBottom: '7px',
			        	paddingTop: '7px' ,
			        	textAlign:'center',
                        color: 'gray'
			        }}>
			            <FlexItem onClick={e => {browserHistory.push(`/store/${storeId}/user/order/will-pay`)}}>
                            <i className="iconfont icon-folder" style={iconStyle}></i>
                            <p><small>待付款</small></p>
			            </FlexItem>
			            <FlexItem onClick={e => {browserHistory.push(`/store/${storeId}/user/order/will-send`)}}>
			                <i className="iconfont icon-bags" style={iconStyle}></i>
                            <p><small>待发货</small></p>
			            </FlexItem>
			            <FlexItem onClick={e => {browserHistory.push(`/store/${storeId}/user/order/will-receive`)}}>
			                <i className="iconfont icon-auto" style={iconStyle}></i>
                            <p><small>待收货</small></p>
			            </FlexItem>
			            <FlexItem onClick={e => {browserHistory.push(`/store/${storeId}/user/order/will-comment`)}}>
			                <i className="iconfont icon-comments" style={iconStyle}></i>
                            <p><small>待评价</small></p>
			            </FlexItem>
			            <FlexItem>
			                <i className="iconfont icon-trade-assurance" style={iconStyle}></i>
                            <p><small>退款中</small></p>
			            </FlexItem>
			        </Flex>


            </Panel>
		);
	}
}
